<template>
  <div class="singer">
      <div id="singer">
        <ul class="song_list" v-for="(item, index) in song" :key="index">
          <li class="song_item" v-for="(items, index) in item.arr" :key="index">
            <span class="title">{{ items.title }}</span>
            <span class="bighao">></span>
          </li>
        </ul>
      </div>
  </div>
</template>
<script>
export default {
  name: "Singer",
  data() {
    return {
      song: [
        {
          arr: [
            {
              title: "热门歌手",
            },
          ],
        },
        {
          arr: [
            {
              title: "华语男歌手",
            },
            {
              title: "华语女歌手",
            },
            {
              title: "华语组合",
            },
          ],
        },
        {
          arr: [
            {
              title: "日韩男歌手",
            },
            {
              title: "日韩女歌手",
            },
            {
              title: "日韩组合",
            },
          ],
        },
        {
          arr: [
            {
              title: "欧美男歌手",
            },
            {
              title: "欧美女歌手",
            },
            {
              title: "欧美组合",
            },
          ],
        },
      ],
    };
  },
};
</script>
<style scoped>
.singer{
  margin-top: 2.4rem;
}
#singer{
    padding: 0 .24rem;
    z-index: 0;
    margin: .3rem 0;
}
.song_list {
  margin-top: 0.36rem;
}
.song_list .song_item{
  width: 100%;
  height: 0.97rem;
  border: 1px solid #e4e4e4;
  border-radius: .1rem;
  line-height: .97rem;
  position: relative;
}
.song_list .song_item:nth-child(2){
    border-top: none;
}
.song_list .song_item:nth-child(3){
    border-top: none;
}
.song_list .song_item .title{
    margin-left: .2rem;
    color: #333333;
    font-size: .34rem;
}
.bighao{
    position: absolute;
    top: 0;
    right: .2rem;
    font-size: .4rem;
    color: #e8e8e8;
    /* font-weight: 1; */
}
</style>